<template>
    <div class="loginbox">
        <van-button type="default" class="btn">跳过</van-button>
        <h2>
            你好，
            <br>
            欢迎来到你好论坛！
        </h2>
        <div class="content">
            <div style="display: flex; margin-bottom: 20px">
                <van-dropdown-menu class="phone">
                    <van-dropdown-item v-model="value" :options="option" />
                </van-dropdown-menu>
                <input type="text" placeholder="请输入手机号码" >
            </div>
            <van-field
                    v-model="code"
                    center
                    clearable
                    label="短信验证码"
                    placeholder="请输入短信验证码"
                    style="background-color:rgba(128, 128, 128, 0.2); margin-bottom: 10px"
            >
                <template #button>
                    <van-button size="small" type="primary">发送验证码</van-button>
                </template>
            </van-field>
            <span>未注册的手机号请先注册！</span>
            <van-button type="info" class="codelogin">登录</van-button>
            <div class="other">
                <router-link :to="{path:'/pwdlogin'}">
                    <span>密码登录</span>
                </router-link>
                <router-link :to="{path:'/enroll'}">
                    <span style="float: right">注册</span>
                </router-link>
            </div>
        </div>
        <p>登录即表明同意<span style="color: blue">《你好协议》</span>和<span style="color: blue">《隐私政策》</span></p>

    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                value: 0,
                code:'',
                option: [
                    { text: '+86', value: 0 },
                    { text: '+87', value: 1 },
                ],
            };
        },
    }
</script>

<style scoped>
    .btn {
        float: right;
        width: 70px;
        height: 30px;
    }
    .loginbox {
        padding: 30px 20px;
    }
    .loginbox>h2 {
        margin-top: 90px;
    }
    .content {
        margin-top: 60px;
    }
    .phone {
        display: inline-block;
        width: 20%;
        color: black;
    }
    /deep/.van-dropdown-menu__bar {
        background-color: rgba(128, 128, 128, 0.2) ;
    }
    .content input {
        padding-left: 8px;
        width:80%;
        border: none;
        background-color: rgba(128, 128, 128, 0.15);
    }
    .content>span {
        font-size: 15px;
        color: blue;
    }
    .codelogin {
        margin-top: 40px;
        width: 100%;
        height: 40px;
    }
    .other {
        margin-top: 20px;
        margin-bottom: 100px;
    }
    .other>span {
        color: blue;
    }
    .loginbox>p {
        position: fixed;
        bottom: 10px;
        font-size: 15px;
    }

</style>